import { Layout, Menu, Breadcrumb, Icon } from 'antd';

const { Header, Content, Footer } = Layout;

import { Link } from 'react-router-dom';

import './index.less';


export class Nav extends React.Component {
    constructor() {
        super();

        this.state = {
            isLogin: false,
            user: ''
        }

        this.logout = this.logout.bind(this);
        this.select = this.select.bind(this);
    }

    componentDidMount() {
        let getUserArr = window.sessionStorage.getItem("user");

        if (getUserArr != null) {
            getUserArr = JSON.parse(getUserArr);
            getUserArr.map(item => {
                if (item.status == true) {
                    this.setState({
                        isLogin: true,
                        user: item.name
                    });

                    return;
                }
            });
        }
    }

    logout() {
        // 退出时记录当前页面地址
        window.sessionStorage.setItem("backurl", this.props.location.pathname);

        // 设置登出状态
        let getUserArr = window.sessionStorage.getItem("user");

        getUserArr = JSON.parse(getUserArr);
        getUserArr.map(item => {
            if (item.name == this.state.user) {
                item.status = false;
                return;
            }
        });

        window.sessionStorage.setItem("user", JSON.stringify(getUserArr));
        this.setState({ isLogin: false });

        // 如果在购物车界面退出登录就要调回首页
        let path = this.props.location.pathname;
        if (path == '/shoppingcar') {
            this.props.history.replace('/');
        }
    }

    select(obj) {
        this.props.history.push(obj.key);
    }

    render() {
        let logInfo = this.state.isLogin == false ?
            (<p><Link to="/login">登录</Link><span>|</span><Link to="/register">注册</Link></p>) :
            (<p>Hi, <a href="javascript:;">{this.state.user}</a><span>|</span><a href="javascript:;" onClick={this.logout}>退出登录</a></p>);
        let currentKey = this.props.location.pathname;
        return (
            <div className="nav">
                <Layout>
                    <Header >
                        <div className="logo" />
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            style={{ lineHeight: '64px' }}
                            defaultSelectedKeys={[currentKey]}
                            onSelect={this.select}
                        >
                            <Menu.Item key="/home">首页</Menu.Item>
                            <Menu.Item key="/goods">实体书</Menu.Item>
                        </Menu>
                        <div className="header-r">
                            {logInfo}
                            <div className="cart">
                                <Link to='/shoppingcar' >
                                    <Icon type="shopping-cart" style={{ fontSize: 18, verticalAlign: 'middle', marginTop: -3, marginRight: 5, color: '#aaa' }} />
                                    购物车
                                </Link>
                            </div>
                        </div>
                    </Header>
                </Layout>
            </div>
        )
    }
}



